<template>
  <div>
    <address-head title="个人中心"></address-head>
    <div class="container">
      <div class="top">
        <div class="welcome">
          <h2>Hi,欢迎来到订花乐!</h2>
          <h3 v-if = 'token'></h3>
          <van-button type="default" round v-else @click="$router.push('/login')">登录/注册</van-button>
        </div>
      </div>
      <div class="middle">
        <div class="myOrder">
          <div>我的订单</div>
          <div>全部订单<van-icon name="arrow" /></div>
        </div>
        <van-grid>
          <van-grid-item icon="paid" text="待付款" />
          <van-grid-item icon="logistics" text="配送中" />
          <van-grid-item icon="notes-o" text="待评价" />
          <van-grid-item icon="send-gift-o" text="已完成" />
        </van-grid>
      </div>
      <div style="height:5px;background:#ccc"></div>
      <div class="other">
        <div>
          <p><van-icon name="send-gift-o" />优惠券</p>
          <van-icon name="arrow" />
        </div>
        <div>
          <p><van-icon name="location-o" />收货地址</p>
          <van-icon name="arrow" />
        </div>
        <div>
          <p><van-icon name="setting-o" />设置</p>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import AddressHead from '@components/AddressHead'
export default {
  data () {
    return {
      token: localStorage.getItem('access_token')
    }
  },
  mounted () {
    console.log(this.token)
  },
  components: {
    MyTabbar,
    AddressHead
  }
}
</script>

<style lang="scss" scoped>
.top{
  height: 200px;
  background: url(/img/background.jpg) no-repeat;
  background-size: 100%;
  .welcome{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    h2{
      color: #fff ;
      font-size: 20px;
      font-weight: normal;
    }
    h3{
      color: rgb(201, 37, 138) ;
      font-size: 30px;
    }
    .van-button{
      font-size: 16px;
      padding: 15px;
    }
  }
}
.middle{
  .myOrder{
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #666;
    padding: 5px 20px;
  }
}
.other{
  padding: 15px;
  >div{
    line-height: 40px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    >.van-icon{
      line-height: 40px;
    }
    p{
      display: flex;
      align-items: center;
      .van-icon{
        font-size: 20px;
        margin-right: 10px;
      }
    }
  }
}
</style>
